<template>
  <div>
    <el-card style="width: 80%; margin-right: 10%; margin-left: 10%;">
      <h1>导入方式</h1>
      <div>1. 创建数据源</div>
      <img :src="require('@/assets/Img4HowToImport/image-20221130152432915.png')" class="imgStyle">
      <div>2. 下载示例模板（不想下载请看下一节如何设置表头）</div>
      <img :src="require('@/assets/Img4HowToImport/image-20221130152128984.png')" class="imgStyle">
      <div>3. 在示例模板中每列对应填入数据（不要改表头）</div>
      <img :src="require('@/assets/Img4HowToImport/image-20221130152707943.png')" class="imgStyle">
      <div>填入前↑</div>
      <div>填入后↓</div>
      <img :src="require('@/assets/Img4HowToImport/image-20221130153029423.png')" class="imgStyle">
      <div>4. 在设置页修改一下默认设置，比如我这里"占星"对应的是"占", "是"表示完成</div>
      <img :src="require('@/assets/Img4HowToImport/image-20221130153244092.png')" class="imgStyle">
      <div>修改为↓</div>
      <img :src="require('@/assets/Img4HowToImport/image-20221130153353942.png')" class="imgStyle">
      <div>5. 选择文件后导入</div>
      <img :src="require('@/assets/Img4HowToImport/image-20221130153801984.png')" class="imgStyle">
      <h1>如何设置表头</h1>

      <div>如果没有采用示例模板或修改了示例模板的表头，可以通过设置表头映射来导入，例如：</div>

      <img :src="require('@/assets/Img4HowToImport/image-20221130154137613.png')" class="imgStyle"><br/>
      <img :src="require('@/assets/Img4HowToImport/image-20221130154059388.png')" class="imgStyle"><br/>
      <img :src="require('@/assets/Img4HowToImport/image-20221130154227157.png')" class="imgStyle"><br/>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "HowToImport"
}
</script>

<style scoped>
  .imgStyle{
    max-width: 800px;
  }
</style>